<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '登录',
    navigationBarTextStyle: '#0000FF',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#a8dced',
    enablePullDownRefresh: false,
  },
}
</route>
<template>
  <view class="w-[100vw] h-[100vh] box-border content">
    <view class="top">
      <wd-img :width="100" :height="100" round src="../../static/logo.png" />
      <view class="mt-[20upx] colorful-text">欢迎进入升华HRMS系统！</view>
    </view>
    <view class="form">
      <view class="mb-[20upx]">
        <wd-input v-model="form.username" prefix-icon="user" placeholder="请输入工号" />
      </view>
      <view class="mb-[40upx]">
        <wd-input
          v-model="form.password"
          show-password
          prefix-icon="tools"
          placeholder="请输入密码"
        />
      </view>
      <!-- <view class="btn" @click="login">登录</view> -->
      <button class="colorful-button" @click="login">登录</button>
    </view>
  </view>
</template>

<script lang="js" setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { loginAccount, getUserInfo } from '@/api/user'
import { useSysStore } from '@/store/systemInfo'

defineOptions({
  name: 'Login',
})

const sysStore = useSysStore()
const title = ref('欢迎进入富临新能源mes系统！')
const form = ref({
  username: '',
  password: '',
})

const login = async () => {
  if (!form.value.password || !form.value.username) {
    uni.showToast({
      title: '请输入账号及密码',
      icon: 'none',
    })
    return
  }
  const res = await loginAccount({ ...form.value })
  if (res.data.code != 500) {
    sysStore.setToken(res.data.token)
    const user = await getUserInfo()
    sysStore.setUserInfo(user.data.user)
    uni.showToast({
      title: '登录成功',
      icon: 'success',
    })
    uni.switchTab({
      url: '/pages/home/index',
    })
  }
  // console.log('res', res)
}
onPullDownRefresh(() => {
  uni.stopPullDownRefresh()
})
</script>

<style lang="scss" scoped>
:deep(.wd-input__body) {
  height: 80upx;
  padding-left: 40upx !important;
  padding-right: 40upx !important;
  padding-top: 8upx;
}
:deep(.wd-input) {
  border-radius: 30upx;
  position: unset;
}
.colorful-text {
  background: linear-gradient(45deg, #dd65a7, #2c2c2c, #04b849, #a6c1ee, #6d11c3);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  font-size: 32upx;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient 5s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.colorful-button {
  padding: 0px 30px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 50px; /* 圆角 */
  background: linear-gradient(45deg, #8bd1e8, #c4f1fa, #ecaac0, #a6c1ee, #84fab0);
  background-size: 300% 300%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition:
    background-position 0.5s ease,
    transform 0.2s ease;
}

/* 悬停效果 */
.colorful-button:hover {
  background-position: 100% 100%;
  transform: scale(1.05);
}

/* 点击效果 */
.colorful-button:active {
  transform: scale(0.95);
}
.content {
  background-image: linear-gradient(#a8dced, transparent);
  padding-top: 30%;
  .top {
    text-align: center;
    margin-bottom: 60upx;
  }
  .form {
    width: 90%;
    margin: 0 auto;
    .btn {
      // background-image: linear-gradient(to right bottom, #a8dced, transparent);
      background-image: linear-gradient(135deg, #667eea 0%, #a8dced 100%);
      // 添加阴影，增加立体感
      box-shadow:
        0 4px 6px rgba(50, 50, 93, 0.11),
        0 1px 3px rgba(0, 0, 0, 0.08);
      height: 100upx;
      text-align: center;
      line-height: 100upx;
      color: white;
      border-radius: 50upx;
    }
  }
}
</style>
